<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js方式ajax实现注册页面</title>
    <!--
         xml:
            用于在后台与服务器交换数据，可以在不重新加载整个网页的情况下，对网页的某部分进行更新
            用于表单校验，后台数据查询，返回结果
            浏览器下拉列表展示
        核心对象：XMLHttpRequest
        打开链接：open(method,url,asunc)
            method：请求的类型GET或POST
            url：请求资源的路径
            async：true(异步）、false(同步）
        发送请求：send(String params)
            params：请求的参数（POST专用）
        处理响应：onreadystatechange
            readyState：
                 0-请求未初始化
                 1-服务器连接已建立
                 2-请求已连接
                 3-请求处理中
                 4-请求已完成，且响应已就绪
             status：
                 200  响应已全部 OK
         响应数据的形式：
             responseText：获得字符串形式的响应数据
             responseXML：获得XML形式的响应数据
    -->
    <script>
        window.onload = function () {
            // 1.为姓名绑定失去焦点事件
            document.getElementById("username").onblur = function () {
                // 2.创建XMLHtpRequest核心对象
                let xmlHttp = new XMLHttpRequest();

                // 3.打开链接
                // 获取姓名
                let username = document.getElementById("username").value;
                xmlHttp.open("GET","userServlet?username="+username,true);

                // 4.发送请求
                xmlHttp.send();

                // 5.处理响应
                xmlHttp.onreadystatechange = function () {
                    // 判断请求和响应是否成功，判断状态码
                    if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
                        // 通过，将响应的数据显示到span标签
                        document.getElementById("uSpan").innerHTML = xmlHttp.responseText;
                    }
                }
            }

        }
    </script>
</head>
<body>
<form autocomplete="off">
    姓名：<input type="text" id="username">
    <span id="uSpan"></span>
    <br>
    密码：<input type="password" id="password">
    <br>
    <input type="submit" value="注册">
</form>
</body>
</html>